import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Form from "components/Form";
import Button from "components/Button";
import { Input } from "components/Input";
import TextArea from "components/TextArea";

<Meta title="Components/Form" component={Form} />

# Form

Form component.

## Props

<Props of={Form} />

## Examples

### Basic

Basic usages for `Form` component.

<Preview>
  <Story name="basic form">
    <Form onSubmit={console.log}>
      <Form.Item
        label="Username"
        desc="It can only contain lowercase letters, numbers and hyphens(-)."
        rules={[{ required: true, message: "Please input username" }]}
      >
        <Input name="name" placeholder="Please input a word" />
      </Form.Item>
      <Form.Item label="Description">
        <TextArea name="description" />
      </Form.Item>
      <br />
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  </Story>
</Preview>

### Group

Form Group can group a section of form items.

<Preview>
  <Story name="form group">
    <Form onSubmit={console.log}>
      <Form.Group
        label="Open Session Sticky"
        desc="the maximum session sticky time is 10800s(3 hours)"
        checkable
        keepDataWhenUnCheck
      >
        <Form.Item label="Maximum session sticky time(s)">
          <Input name="sessionTimeOut" />
        </Form.Item>
      </Form.Group>
      <Form.Group
        label="Open Session Sticky"
        desc="the maximum session sticky time is 10800s(3 hours)"
        checkable
      >
        <Form.Item label="Maximum session sticky time(s)">
          <Input name="sessionTimeOut2" />
        </Form.Item>
      </Form.Group>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  </Story>
</Preview>
